<template>
  <div class="fileUpload">
    <div class="header">
      <span>文件数据源</span>
      <el-button type="primary" plain class="" size="small" @click="$router.push({path:'/create-file'})">添加文件</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column prop="taskName" label="名称" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="statusContext" label="状态" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" plain type="success" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button size="mini" plain type="" @click="runPim(scope.row)" v-if="scope.row.status === '0'||scope.row.status === '3'">执行</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
    </el-pagination>
    <el-dialog title="编辑" :visible.sync="editVisible">
      <el-form ref="editForm" :model="editForm" label-width="80px" :rules='editRules'>
        <el-form-item label="名称" prop='taskname'>
          <el-input v-model="editForm.taskname"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editPim">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { updateTask, filedbTaskRun, filedvGridTask } from '@/api/fileUpload'
export default {
    name: 'fileDataSource',
    data () {
        return {
            pageTotal: 0,
            page: 0,
            pagesize: 10,
            tableData: [],
            editVisible: false,
            editForm: {
                taskname: '',
                taskid: ''
            },
            editRules: {
                taskname: [{ required: true, message: '请输入名称', trigger: 'blur' }]
            }
        }
    },
    mounted () {
        this.getTable()
    },
    methods: {
        openEditDialog (data) {
            this.editForm.taskname = data.taskName
            this.editForm.taskid = data.id
            this.editVisible = true
            this.$nextTick(() => {
                this.$refs.editForm.clearValidate()
            })
        },
        editPim () {
            this.$refs.editForm.validate(valid => {
                if (valid) {
                    updateTask(this.editForm).then(response => {
                        this.getTable()
                        this.editVisible = false
                    })
                } else {
                    return false
                }
            })
        },
        runPim (data) {
            let _data = {
                taskid: data.id
            }
            filedbTaskRun(_data).then(response => {
                this.getTable()
                this.$message(response.msg)
            })
        },
        getTable () {
            let _postData = {
                page: this.page,
                pagesize: this.pagesize
            }
            filedvGridTask(_postData).then(response => {
                this.tableData = response.list
                this.pageTotal = response.count
            })
        },
        handleSizeChange (val) {
            this.pagesize = val
            this.getTable()
        },
        handleCurrentChange (val) {
            this.page = val - 1
            this.getTable()
        }
    }
}
</script>
<style scoped>
.fileUpload{
    padding:20px;
}
.header {
  height: 40px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
.header span {
  color: #1169c4;
  font-size: 20px;
  line-height: 30px;
}
.header .el-button {
  float: right;
  margin-left: 20px;
}
</style>
